<template>
    <div class="signeList">
        <Row>
            <Col :xs="24">
                <div class="margin-up-down">  
                    <newfourLevelLinkage
                        @changeProvince="changeProvince"
                        @changeCity="changeCity"
                        @changeArea="changeArea"
                        :province="Number(info.provinceCode)"
                        :city="Number(info.cityCode)"
                        :area="Number(info.districtCode)"    
                        ref="newfourLevelLinkage"             
                        style="width:100%"                
                    ></newfourLevelLinkage>       
                </div>
                <div class="margin-up-down">
                    <Select class="w-select" v-model="info.statisticalYear" placeholder="请选择年份" >
                        <Option
                            v-for="item in yearlist"
                            :value="item.value"
                            :key="item.value"
                            style='text-align:center'
                        >{{item.name}}</Option>
                    </Select>
                </div>
                <div class="margin-up-down">
                    <Button type="primary" @click="loadPage(1)" class="btn">
                        <Icon type="ios-search" size="14"/>
                    </Button>
                </div>
                <div class="margin-up-down">
                    <Button type="primary" @click="typeChange" class="btn" v-if="type == 'bj'">
                        编辑
                    </Button>
                    <Button type="primary" @click="savereport" class="btn" v-if="type == 'bc'">
                        保存
                    </Button>
                </div>
                <div class="margin-up-down">
                    <Button disabled='true' @click="reset" class="btn">
                        获取平台数据
                    </Button>
                </div>
            </Col>
        </Row>
        <h3 style="text-align: center; margin: 15px 0; font-weight:600">( {{info.statisticalYear+'年'}} )人口信息数据填报表</h3>
        <Table class="m-table" height="600" border stripe :columns="column1" :data="data1"  v-if="type == 'bj'"></Table>
        <Table class="m-table" height="600" border stripe :columns="column2" :data="data1" ref="table1" v-if="type == 'bc'">
            <template slot="permanentResidentNum" slot-scope="props">
                <InputNumber v-model="props.row.permanentResidentNum" placeholder="人数" :min='0'></InputNumber>                            
            </template>
            <template slot="childrenNum" slot-scope="props">                                       
                <InputNumber v-model="props.row.childrenNum" placeholder="人数" :min='0'></InputNumber>                            
            </template>
            <template slot="elderlyNum" slot-scope="props" >                                       
                <InputNumber v-model="props.row.elderlyNum" placeholder="人数" :min='0'></InputNumber>                            
            </template>
            <template slot="puerperaNum" slot-scope="props" >                                       
                <InputNumber v-model="props.row.puerperaNum" placeholder="人数" :min='0'></InputNumber>                            
            </template>
            <template slot="hypertensivePatientsNum" slot-scope="props" >                                       
                <InputNumber v-model="props.row.hypertensivePatientsNum" placeholder="人数" :min='0'></InputNumber>                            
            </template>
            <template slot="diabeticNum" slot-scope="props" >                                       
                <InputNumber v-model="props.row.diabeticNum" placeholder="人数" :min='0'></InputNumber>                            
            </template>
            <template slot="tuberculosisPatientsNum" slot-scope="props" >                                       
                <InputNumber v-model="props.row.tuberculosisPatientsNum" placeholder="人数" :min='0'></InputNumber>                            
            </template>
            <template slot="mentalDisorderNum" slot-scope="props" >                                       
                <InputNumber v-model="props.row.mentalDisorderNum" placeholder="人数" :min='0'></InputNumber>                            
            </template>
            <template slot="disabledNum" slot-scope="props" >                                       
                <InputNumber v-model="props.row.disabledNum" placeholder="人数" :min='0'></InputNumber>                            
            </template>
            <template slot="spouseNum" slot-scope="props" >                                       
                <InputNumber v-model="props.row.spouseNum" placeholder="人数" :min='0'></InputNumber>                            
            </template>
            <template slot="noPoorNum" slot-scope="props" >                                       
                <InputNumber v-model="props.row.noPoorNum" placeholder="人数" :min='0'></InputNumber>                            
            </template>
            <template slot="returnPoorNum" slot-scope="props" >                                       
                <InputNumber v-model="props.row.returnPoorNum" placeholder="人数" :min='0'></InputNumber>                            
            </template>
            <template slot="keyPopulationNum" slot-scope="props" >                                       
                <InputNumber v-model="props.row.keyPopulationNum" placeholder="人数" :min='0'></InputNumber>                            
            </template>
            <template slot="healthyPopulationNum" slot-scope="props" >                                       
                <InputNumber v-model="props.row.healthyPopulationNum" placeholder="人数" :min='0'></InputNumber>                            
            </template>
            <template slot="subsistenceAllowanceNum" slot-scope="props" >                                       
                <InputNumber v-model="props.row.subsistenceAllowanceNum" placeholder="人数" :min='0'></InputNumber>                            
            </template>
            <template slot="difficultCrowdNum" slot-scope="props" >                                       
                <InputNumber v-model="props.row.difficultCrowdNum" placeholder="人数" :min='0'></InputNumber>                            
            </template>
            <template slot="otherGroupsNum" slot-scope="props" >                                       
                <InputNumber v-model="props.row.otherGroupsNum" placeholder="人数" :min='0'></InputNumber>                            
            </template>
        </Table>
        <!-- <div class="page">
            <Page :total="count" :current='info.pageNo' :page-size="info.pageSize" show-total show-elevator @on-change="loadPage"/>
        </div> -->
    </div>
</template>
<script>
import api from "@/api/commonApi";
import newfourLevelLinkage from "@/components/newfourLevelLinkage";

export default { 
    components: {
        newfourLevelLinkage,
    },
    data() {
        return {
            info: {
                provinceCode: '',
                cityCode: '',
                districtCode: '',
                statisticalYear: this.endYear,
            },
            column1: [
                {
                    title: "排序",
                    key: "sum",
                    width: 80,
                    align: "center",
                    render: (h, params) => {
                        // let sum = (this.info.pageNo - 1) * this.info.pageSize + params.index + 1;
                        let sum = params.row._index + 1;
                        return h("span", sum);
                    },
                },
                { title: "机构名称", key: "orgName", align: "center", width: 150, },
                { title: "辖区内常驻居民数（人）", key: "permanentResidentNum", align: "center", width: 150,},
                { title: "辖区0-6岁儿童数（人）", key: "childrenNum", align: "center", width: 150, },
                { title: "辖区内65岁以上常驻居民数（人）", key: "elderlyNum", align: "center", width: 150, },
                { title: "辖区内孕13周之前建册并进行第一次产前检查的产妇人数（人）", key: "puerperaNum", align: "center", width: 250, },
                { title: "年内辖区内已管理的高血压患者人数（人）", key: "hypertensivePatientsNum", align: "center", width: 250, },
                { title: "年内辖区内已管理的2型糖尿病患者人数（人）", key: "diabeticNum", align: "center", width: 250, },
                { title: "已管理的肺结核患者人数（人）", key: "tuberculosisPatientsNum", align: "center", width: 150, },
                { title: "辖区内登记在册、诊断明确、在家居住的严重精神障碍患者人数（人）", key: "mentalDisorderNum", align: "center", width: 250, },
                { title: "辖区内残疾人数（人）", key: "disabledNum", align: "center", width: 150, },
                { title: "纳入计划生育家庭特别扶助制度的独生子女伤残或死亡家庭的夫妻人数（人）", key: "spouseNum", align: "center", width: 250, },
                { title: "辖区内脱贫人口数（人）", key: "noPoorNum", align: "center", width: 150, },
                { title: "辖区内易返贫人口数（人）", key: "returnPoorNum", align: "center", width: 150, 
                },
                { title: "重点人群人口数（人）", key: "keyPopulationNum", align: "center", width: 150, 
                },
                { title: "健康人群人口数（人）", key: "healthyPopulationNum", align: "center", width: 150, 
                },
                { title: "低保人群人口数（人）", key: "subsistenceAllowanceNum", align: "center",width: 150, 
                },
                { title: "突发困难人群人口数（人）", key: "difficultCrowdNum", align: "center", width: 150, 
                },
                { title: "其他人群人口数（人）", key: "otherGroupsNum", align: "center", width: 150, 
                },
            ],
            column2: [
                {
                    title: "排序",
                    key: "sum",
                    width: 80,
                    align: "center",
                    render: (h, params) => {
                        // let sum = (this.info.pageNo - 1) * this.info.pageSize + params.index + 1;
                        let sum = params.row._index + 1;
                        return h("span", sum);
                    },
                },
                { title: "机构名称", key: "orgName", align: "center", width: 150, },
                { title: "辖区内常驻居民数（人）", key: "permanentResidentNum", align: "center", width: 150,
                    render:(h,params) => {
                        this.data1[params.index] = params.row
                        return [
                            h('div', 
                                this.$refs.table1.$scopedSlots.permanentResidentNum({
                                    row: params.row,
                                    idx: params.row._index
                                })  
                            )
                        ]
                    }
                },
                { title: "辖区0-6岁儿童数（人）", key: "childrenNum", align: "center", width: 150, 
                    render:(h,params) => {
                        this.data1[params.index] = params.row
                        return [
                            h('div', 
                                this.$refs.table1.$scopedSlots.childrenNum({
                                    row: params.row,
                                    idx: params.row._index
                                })  
                            )
                        ]
                    }
                },
                { title: "辖区内65岁以上常驻居民数（人）", key: "elderlyNum", align: "center", width: 150, 
                    render:(h,params) => {
                        this.data1[params.index] = params.row
                        return [
                            h('div', 
                                this.$refs.table1.$scopedSlots.elderlyNum({
                                    row: params.row,
                                    idx: params.row._index
                                })  
                            )
                        ]
                    }
                },
                { title: "辖区内孕13周之前建册并进行第一次产前检查的产妇人数（人）", key: "puerperaNum", align: "center", width: 250, 
                    render:(h,params) => {
                        this.data1[params.index] = params.row
                        return [
                            h('div', 
                                this.$refs.table1.$scopedSlots.puerperaNum({
                                    row: params.row,
                                    idx: params.row._index
                                })  
                            )
                        ]
                    }
                },
                { title: "年内辖区内已管理的高血压患者人数（人）", key: "hypertensivePatientsNum", align: "center", width: 250, 
                    render:(h,params) => {
                        this.data1[params.index] = params.row
                        return [
                            h('div', 
                                this.$refs.table1.$scopedSlots.hypertensivePatientsNum({
                                    row: params.row,
                                    idx: params.row._index
                                })  
                            )
                        ]
                    }
                },
                { title: "年内辖区内已管理的2型糖尿病患者人数（人）", key: "diabeticNum", align: "center", width: 250, 
                    render:(h,params) => {
                        this.data1[params.index] = params.row
                        return [
                            h('div', 
                                this.$refs.table1.$scopedSlots.diabeticNum({
                                    row: params.row,
                                    idx: params.row._index
                                })  
                            )
                        ]
                    }
                },
                { title: "已管理的肺结核患者人数（人）", key: "tuberculosisPatientsNum", align: "center", width: 150, 
                    render:(h,params) => {
                        this.data1[params.index] = params.row
                        return [
                            h('div', 
                                this.$refs.table1.$scopedSlots.tuberculosisPatientsNum({
                                    row: params.row,
                                    idx: params.row._index
                                })  
                            )
                        ]
                    }
                },
                { title: "辖区内登记在册、诊断明确、在家居住的严重精神障碍患者人数（人）", key: "mentalDisorderNum", align: "center", width: 250, 
                    render:(h,params) => {
                        this.data1[params.index] = params.row
                        return [
                            h('div', 
                                this.$refs.table1.$scopedSlots.mentalDisorderNum({
                                    row: params.row,
                                    idx: params.row._index
                                })  
                            )
                        ]
                    }
                },
                { title: "辖区内残疾人数（人）", key: "disabledNum", align: "center", width: 150, 
                    render:(h,params) => {
                        this.data1[params.index] = params.row
                        return [
                            h('div', 
                                this.$refs.table1.$scopedSlots.disabledNum({
                                    row: params.row,
                                    idx: params.row._index
                                })  
                            )
                        ]
                    }
                },
                { title: "纳入计划生育家庭特别扶助制度的独生子女伤残或死亡家庭的夫妻人数（人）", key: "spouseNum", align: "center", width: 250, 
                    render:(h,params) => {
                        this.data1[params.index] = params.row
                        return [
                            h('div', 
                                this.$refs.table1.$scopedSlots.spouseNum({
                                    row: params.row,
                                    idx: params.row._index
                                })  
                            )
                        ]
                    }
                },
                { title: "辖区内脱贫人口数（人）", key: "noPoorNum", align: "center", width: 150, 
                    render:(h,params) => {
                        this.data1[params.index] = params.row
                        return [
                            h('div', 
                                this.$refs.table1.$scopedSlots.noPoorNum({
                                    row: params.row,
                                    idx: params.row._index
                                })  
                            )
                        ]
                    }
                },
                { title: "辖区内易返贫人口数（人）", key: "returnPoorNum", align: "center", width: 150, 
                    render:(h,params) => {
                        this.data1[params.index] = params.row
                        return [
                            h('div', 
                                this.$refs.table1.$scopedSlots.returnPoorNum({
                                    row: params.row,
                                    idx: params.row._index
                                })  
                            )
                        ]
                    }
                },
                { title: "重点人群人口数（人）", key: "keyPopulationNum", align: "center", width: 150, 
                    render:(h,params) => {
                        this.data1[params.index] = params.row
                        return [
                            h('div', 
                                this.$refs.table1.$scopedSlots.keyPopulationNum({
                                    row: params.row,
                                    idx: params.row._index
                                })  
                            )
                        ]
                    }
                },
                { title: "健康人群人口数（人）", key: "healthyPopulationNum", align: "center", width: 150, 
                    render:(h,params) => {
                        this.data1[params.index] = params.row
                        return [
                            h('div', 
                                this.$refs.table1.$scopedSlots.healthyPopulationNum({
                                    row: params.row,
                                    idx: params.row._index
                                })  
                            )
                        ]
                    }
                },
                { title: "低保人群人口数（人）", key: "subsistenceAllowanceNum", align: "center",width: 150, 
                    render:(h,params) => {
                        this.data1[params.index] = params.row
                        return [
                            h('div', 
                                this.$refs.table1.$scopedSlots.subsistenceAllowanceNum({
                                    row: params.row,
                                    idx: params.row._index
                                })  
                            )
                        ]
                    }
                },
                { title: "突发困难人群人口数（人）", key: "difficultCrowdNum", align: "center", width: 150, 
                    render:(h,params) => {
                        this.data1[params.index] = params.row
                        return [
                            h('div', 
                                this.$refs.table1.$scopedSlots.difficultCrowdNum({
                                    row: params.row,
                                    idx: params.row._index
                                })  
                            )
                        ]
                    }
                },
                { title: "其他人群人口数（人）", key: "otherGroupsNum", align: "center", width: 150, 
                    render:(h,params) => {
                        this.data1[params.index] = params.row
                        return [
                            h('div', 
                                this.$refs.table1.$scopedSlots.otherGroupsNum({
                                    row: params.row,
                                    idx: params.row._index
                                })  
                            )
                        ]
                    }
                },
            ],
            data1: [],
            count: 0,
            pageSize: 10,
            pageNo: 1,
            yearlist: [],
            type: 'bj',
            startYear: '',
            endYear: '',
        };
    },
    created() {
        this.hospital = this.$route.query.hospital
            ? this.$route.query.hospital
            : null;
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/operation/ordersmanagement/index",
                title: "订单管理"
            },
            {
                path: "/index/comprehensive/registration/list",
                title: "预约挂号订单"
            }
        ];
        this.$emit("changeBreadList", breadList);
    },
    mounted() {
        let pageNo = this.$route.query.pageNo;
        pageNo = pageNo ? pageNo : 1;
        this.yearChange();
        //上来就加载第一页数据
        this.loadPage();       
    },
    methods: {
        //选择省
        changeProvince(val) {
            this.info.provinceCode = val;
        },
        changeCity(val) {
            this.info.cityCode = val
        },
        changeArea(val) {
            this.info.districtCode = val;
        },
        //获取年份下拉数组
        yearChange () {
            var myDate = new Date()
            this.startYear = myDate.getFullYear() - 5    // 起始年份
            this.endYear = myDate.getFullYear()    // 当前年份
            this.info.statisticalYear = this.endYear   
            this.yearlist = []
            for (var i = this.startYear; i <= this.endYear; i++) {
                this.yearlist.unshift({value: (i), name: (i)+'年'})
            }
        },
        typeChange() {
            this.type = 'bc'
        },
        //加载列表数据
        loadPage() {
            this.$axios.post(api.getOperateDemographicInfoList, this.info).then(resp => {
                if (resp.data.code == 1) {
                    let ret = resp.data.object;
                    if(ret){
                        this.data1 = ret;
                    } else {
                        this.data1 = [];
                    }                       
                } else {
                    this.$Message.error(resp.data.message);
                    this.data1 = [];
                }
            })
            .catch(err => {
                console.log(err);
            });
        },
        //保存表格数据
        savereport() {
            this.data1.forEach(i=>{
                i.statisticalYear = this.info.statisticalYear
            })
            this.$axios.post(api.saveOrUpdate, this.data1).then(resp => {
                if (resp.data.success) {
                    this.$Message.success("保存成功");
                    this.type = 'bj'
                    this.loadPage(1)
                } 
            })
            .catch(err => {
                console.log(err);
            });
        },
    }
};
</script>
<style lang="less" scoped>
.signeList {
    padding: 10px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    min-height: 600px;
    .w-select {
        width: 100px;
    }
    .w-input {
        width: 220px;
    }
    .m-table {
        margin: 10px 0;
    }
    .margin-up-down {
        display: inline-block;
        margin: 10px 0;
    }
    .btn {
        min-width: 50px;
        height: 32px;
        line-height: 18px;
    }
    .page {
        width: 100%;
        margin: 10px auto;
        text-align: center;
    }
    .num {
        padding: 10px 0;
        span {
            margin-right: 80px;
        }
    }
}
.signe {
    width:90%;
    height:auto;
    display:flex;
    margin:0 auto;
    flex-direction:column;
    .number {
        font-size: 14px;
        font-weight: 550;
        text-align: center;
        margin-bottom: 20px;
    }
    .tishi {
        color: #5362e1;
    }
}
</style>